<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html>
<head>
    <title>Drool (Digital Currency Tool)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="resources/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="resources/css/main.css"/>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:800,300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'>


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <%--<script type="text/javascript" src="<c:url value="resources/js/jquery.js"/>"></script>--%>
    <script type="text/javascript" src="<c:url value="resources/js/main.js"/>"></script>


</head>
<body>

 <div id="mainContainer">
<header>
    <h1>


        <a href="index.jsp"><img src="resources/images/Drool.png" alt="Drool (Digital Currency Tool)"/></a>
       </h1>
    <nav>
        <ul>
            <li><a href="index.jsp">HOME</a></li>
            <li><a href="api.jsp">API</a></li>
            <li><a href="doc.jsp">DOCUMENTATION</a></li>
            <li><a href="contact.jsp">CONTACT</a></li>
        </ul>
    </nav>
</header>
<form id="exchangeForm">
    <div class="currency">
        <div><label for="fromCurrency" class="label">INPUT VALUE</label>
            <div class="wrapper">
            <input type="number" id="fromCurrency" class="currencyInput" value="1"/>
            <span id="chosenInitialCurrency" class="currencyLabel">BTC</span>
                </div>
        </div>
        <ul class="currencyList">
            <li>
                <button type="button" data-currency="BTC" data-currency-rate="" class="active">BTC</button>
            </li>
            <li>
                <button type="button" data-currency="USD" data-currency-rate="">USD</button>
            </li>
            <li>
                <button type="button" data-currency="EUR" data-currency-rate="">EUR</button>
            </li>
            <li class="last">
                <button type="button" data-currency="MDL" data-currency-rate="">MDL</button>
            </li>

        </ul>
    </div>

    <div id="equals">=</div>

    <div class="currency">
        <div><label for="toCurrency" class="label">RESULT</label>

            <div class="wrapper">
            <input type="number" id="toCurrency" class="currencyInput"/>
            <span id="chosenDestinationCurrency" class="currencyLabel">MDL</span>
                </div>
        </div>
        <ul class="currencyList">
            <li>
                <button type="button" data-currency="BTC" data-currency-rate="">BTC</button>
            </li>
            <li>
                <button type="button" data-currency="USD" data-currency-rate="">USD</button>
            </li>
            <li>
                <button type="button" data-currency="EUR" data-currency-rate="">EUR</button>
            </li>
            <li class="last">
            <button type="button" data-currency="MDL" data-currency-rate="" class="active">MDL</button>
            </li>
        </ul>
    </div>

</form>

 </div>
</body>
</html>
